<!-- page content -->
<div id="dashboardVue" class="right_col" role="main">
    <!-- top tiles -->
    <div class="row" style="display: inline-block">
        <div class="tile_count">
            <div class="col-md-2 col-sm-4 tile_stats_count">
                <span class="count_top"><i class="fa fa-user"></i> Total Users</span>
                <div class="count">2500</div>
                <span class="count_bottom"><i class="green">4% </i> From last Week</span>
            </div>
            <div class="col-md-2 col-sm-4 tile_stats_count">
                <span class="count_top"><i class="fa fa-clock-o"></i> Average Time</span>
                <div class="count">123.50</div>
                <span class="count_bottom"
                ><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span
                >
            </div>
            <div class="col-md-2 col-sm-4 tile_stats_count">
                <span class="count_top"><i class="fa fa-user"></i> Total Males</span>
                <div class="count green">2,500</div>
                <span class="count_bottom"
                ><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span
                >
            </div>
            <div class="col-md-2 col-sm-4 tile_stats_count">
                <span class="count_top"><i class="fa fa-user"></i> Total Females</span>
                <div class="count">4,567</div>
                <span class="count_bottom"
                ><i class="red"><i class="fa fa-sort-desc"></i>12% </i> From last Week</span
                >
            </div>
            <div class="col-md-2 col-sm-4 tile_stats_count">
                <span class="count_top"><i class="fa fa-user"></i> Total Collections</span>
                <div class="count">2,315</div>
                <span class="count_bottom"
                ><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span
                >
            </div>
            <div class="col-md-2 col-sm-4 tile_stats_count">
                <span class="count_top"><i class="fa fa-user"></i> Total Connections</span>
                <div class="count">7,325</div>
                <span class="count_bottom"
                ><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span
                >
            </div>
        </div>
    </div>
    <!-- /top tiles -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div id="dashboard_line_flot" style="height: 400px"></div>
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <!-- <div id="main" class="dashboard_line" style="width: 600px; height: 400px"></div> -->
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="dashboard_line" style="width: 600px; height: 400px"></div>
        </div>
    </div>
    <br />
</div>

<!-- echart -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
<!-- Flot -->
<script src="/vendors/Flot/jquery.flot.js"></script>
<script src="/vendors/Flot/jquery.flot.pie.js"></script>
<script src="/vendors/Flot/jquery.flot.time.js"></script>
<script src="/vendors/Flot/jquery.flot.stack.js"></script>
<script src="/vendors/Flot/jquery.flot.resize.js"></script>
<!-- Flot plugins -->
<script src="/vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
<script src="/vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
<script src="/vendors/flot.curvedlines/curvedLines.js"></script>

<script type="text/javascript">
    var dashboardVue=new Vue({
        el:"#dashboardVue",
        data:{
            coronaviruses: [],
        },
        methods:{
            initCoronaciruses:function () {
                var self=this;
                $.ajax({
                    url: "/api/coronaviruses",
                    type: "get",
                    // contentType: "application/json",
                    // data: JSON.stringify(searchBean),
                    success: function (rs) {
                        self.coronaviruses = rs;
                        self.initLineEcharts();
                        self.initLineFlot();
                    },
                    error: function (data) {
                        layer.alert(data.responseText, { icon: 0 });
                    }
                });
            }
            initLineFlot: function () {
                var chart_plot_01_settings = {
                    series: {
                        lines: {
                            show: false,
                            fill: true,
                        },
                        splines: {
                            show: true,
                            tension: 0.4,
                            lineWidth: 1,
                            fill: 0.4,
                        },
                        points: {
                            radius: 0,
                            show: true,
                        },
                        shadowSize: 2,
                    },
                    grid: {
                        verticalLines: true,
                        hoverable: true,
                        clickable: true,
                        tickColor: "#d5d5d5",
                        borderWidth: 1,
                        color: "#fff",
                    },
                    colors: [
                        "rgba(38, 185, 154, 0.38)",
                        "rgba(3, 88, 106, 0.38)",
                        "rgba(22, 155, 144, 0.28)",
                        "rgba(33, 166, 122, 0.14)",
                    ],
                    xaxis: {
                        tickColor: "rgba(51, 51, 51, 0.06)",
                        mode: "time",
                        tickSize: [1, "day"],
                        //tickLength: 10,
                        axisLabel: "Date",
                        axisLabelUseCanvas: true,
                        axisLabelFontSizePixels: 12,
                        axisLabelFontFamily: "Verdana, Arial",
                        axisLabelPadding: 10,
                    },
                    yaxis: {
                        ticks: 8,
                        tickColor: "rgba(51, 51, 51, 0.06)",
                    },
                    tooltip: false,
                };

                var diagnosis = [];
                var overseasImport = [];
                var cure = [];
                var death = [];
                $.each(this.coronaviruses, function (i, item) {
                    diagnosis.push([new Date(item.date), item.diagnosis]);
                    overseasImport.push([new Date(item.date), item.overseasImport]);
                    cure.push([new Date(item.date), item.cure]);
                    death.push([new Date(item.date), item.death]);
                });
                console.log(diagnosis);

                var gzbds = [];
                // 画图，将所有图轨加入到 list 中
                gzbds.push({ label: "<div style='color: #0b2e13'>确诊数</div>", data: diagnosis });
                gzbds.push({ label: "<div style='color: #0b2e13'>输入数</div>", data: overseasImport });
                gzbds.push({ label: "<div style='color: #0b2e13'>治愈数</div>", data: cure });
                gzbds.push({ label: "<div style='color: #0b2e13'>死亡数</div>", data: death });

                $.plot($("#dashboard_line_flot"), gzbds, chart_plot_01_settings);
            },
            initLineEcharts: function () {
                var legends = ["确诊数", "输入数", "治愈数", "死亡数"];
                var xAxis = [];
                var diagnosis = [];
                var overseasImport = [];
                var cure = [];
                var death = [];
                $.each(this.coronaviruses, function (i, item) {
                    xAxis.push(item.date);
                    diagnosis.push(item.diagnosis);
                    overseasImport.push(item.overseasImport);
                    cure.push(item.cure);
                    death.push(item.death);
                });
                console.log(diagnosis);

                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById("dashboard_line"));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: "冠状病毒",
                    },
                    tooltip: {},
                    legend: {
                        data: legends,
                    },
                    xAxis: {
                        data: xAxis,
                    },
                    yAxis: {},
                    series: [
                        {
                            name: "确诊数",
                            type: "line",
                            data: diagnosis,
                        },
                        {
                            name: "输入数",
                            type: "line",
                            data: overseasImport,
                        },
                        {
                            name: "治愈数",
                            type: "line",
                            data: cure,
                        },
                        {
                            name: "死亡数",
                            type: "line",
                            data: death,
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        },
        mounted: function () {
            this.initCoronaviruses();
        },
    })

    /*// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("dashboard_line"));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: "ECharts 入门示例",
        },
        tooltip: {},
        legend: {
            data: ["销量"],
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
            {
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20],
            },
        ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);*/
</script>
